<template>
	<view class="main animated fadeIn faster">
		<view class="content position-fixed z-index-100" :style="{'paddingTop':$store.state.statusBarHeight+'px','backgroundColor':bgcolor, 'borderBottom': borderBottom}">
			<view class="title">
				<view class="d-flex-btn ml-2" @click="goBack">
					<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/close.png" style="width: 40rpx; height: 40rpx;"></image>
				</view>
				<text>交友战力分评测</text>
			</view>
		</view>
		<view style="width: 80%; margin: 200rpx auto 80rpx;">
			<view class="d-flex d-flex-between">
				<view class="d-flex">
					<view class="">第{{index+1}}题</view>
					<view class="ml-1 font24" style="line-height: 38rpx;">/{{total}}</view>
				</view>
				<view class="font22">根据第一直觉去选择会更准确哦</view>
			</view>
			<view class="mt-2 mb-3 rounded20 position-relative" style="width: 100%; height: 20rpx; background: #eaeaea; box-sizing: border-box;">
				<view class="position-absolute rounded20 ProgressStyle" :style="{'width': progress+'%'}"></view>
			</view>
		</view>
		<view style="width: 80%; margin: 0 auto;"v-for="(item, dex) in topicList" :key="item.id">
			<view v-if="dex === index">
				<view class="text-center color000 font32 mb-5">{{item.name}}</view>
				<view :class="['mt-3','rounded40','OptionStyle',item.answer==='answerA'? 'current' : '']" @click="select('answerA',dex)">A. {{item.answerA}}</view>
				<view :class="['mt-3','rounded40','OptionStyle',item.answer==='answerB'? 'current' : '']" @click="select('answerB',dex)">B. {{item.answerB}}</view>
				<view :class="['mt-3','rounded40','OptionStyle',item.answer==='answerC'? 'current' : '']" @click="select('answerC',dex)">C. {{item.answerC}}</view>
				<view :class="['mt-3','rounded40','OptionStyle',item.answer==='answerD'? 'current' : '']" @click="select('answerD',dex)">D. {{item.answerD}}</view>
			</view>
		</view>
		<view class="text-center rounded40 py-2 position-fixed preBtn" v-if="index !== 0 && index !==total-1" @click="pre">上一题</view>
		<view class="position-fixed d-flex d-flex-between" v-if="index === total-1" style="width: 80%; left: 50%; transform: translateX(-50%); bottom: 100rpx;">
			<view class="text-center rounded40 py-2 lastBtn" @click="pre">上一题</view>
			<view class="text-center rounded40 py-2 lastBtn" @click="submit">完成</view>
		</view>
	</view>
</template>

<script>
	import { DaziApi } from '../../http/Dazi';
	import store from '@/store/index.js';
	export default {
		data() {
			return {
				bgcolor:'transparent',
				borderBottom: 'none',
				finish: false,
				TestParams: {
					pageIndex: 1,
					pageSize: 10,
					refGameId: null
				},
				gameName: null,
				gameIcon: null,
				topicList: [],
				total: 1,
				index: 0
			}
		},
		methods: {
			goBack() {
				uni.navigateBack({
					delta: 1
				});
			},
			// 获取题目
			async DaziTest() {
				let res= await DaziApi.DaziTest(this.TestParams);
				this.topicList = res.records
				this.topicList.forEach(item => {
					item.answer = null
				})
				this.total = res.total
			},
			// 选择答案
			select(opt, dex) {
	        	this.topicList[dex].answer = opt
	        	if(this.index === this.total-1) {
	            	return
	          	}
	          	if(this.timeout) {
	            	clearTimeout(this.timeout);
	          	}
	          	this.timeout = setTimeout(() => {
	            	this.index++
	          	},400)
	        },
			// 切换到上一题
			pre() {
				if(this.index === 0) {
					return
				}
				this.index--
			},
			// 提交
			async submit() {
				
				// 检查题目是否都完成了
				this.finish = this.topicList.every((i) => i.answer!== null && i.answer!== undefined);
				
				if(this.finish) {
					
					// 将选择的答案做一个总结
					let answer = {
						answerA: 0,
						answerB: 0,
						answerC: 0,
						answerD: 0
					}
					this.topicList.forEach((item, dex) => {
						if(item.answer === 'answerA') {
							answer.answerA++
						}
						if(item.answer === 'answerB') {
							answer.answerB++
						}
						if(item.answer === 'answerC') {
							answer.answerC++
						}
						if(item.answer === 'answerD') {
							answer.answerD++
						}
					})
					
					// 找出选择最多的一项
					const valuesArray = Object.values(answer);
					let maxValue = -1;
					let maxIndex = -1;
					valuesArray.forEach((value, index) => {
					    if (value > maxValue) {
					        maxValue = value;
					        maxIndex = index;
					    }
					});
					
					// 根据选择的答案获取人物性格
					let params = {
						gameId: this.TestParams.refGameId
					}
					let character = null
					let topic = null
					let res = await DaziApi.TestResult(params)
					if(maxIndex===0) {
						character = res.analysisA
						topic = res.topicA
					}
					if(maxIndex===1) {
						character = res.analysisB
						topic = res.topicB
					}
					if(maxIndex===2) {
						character = res.analysisC
						topic = res.topicC
					}
					if(maxIndex===3) {
						character = res.analysisD
						topic = res.topicD
					}
					
					// 创建人物性格Echarts图表数据
					var Echarts = []
					for(var i=0; i<5 ;i++) {
						if(i===maxIndex) {
							Echarts.push(Math.floor(Math.random()*41)+70)
						} else {
							Echarts.push(Math.floor(Math.random()*41)+50)
						}
					}
					console.log(character,Echarts);
					uni.showToast({
						title:'完成!',
						duration:1500
					})
					setTimeout(() => {
						let dataObj = {
							Echarts:Echarts,
							character:character,
							topic: topic
						}
						console.log(dataObj);
						uni.setStorageSync('data', dataObj);
						uni.navigateBack({
							delta: 1
						});
					},1500)
				} else {
					uni.showToast({
						icon: "none",
						title:'还有题目未完成哦！',
						duration:1500
					})
				}
			}
		},
		computed: {
			progress() {
				return (((this.index+1)/this.total).toFixed(2)) * 100
			}
		},
		onPageScroll(e) {
			let scrollTop = e.scrollTop
			if (scrollTop > 10) {
				this.bgcolor = '#ffffff'
				this.borderBottom = '1px solid rgba(204, 204, 204, .2)'
			}else{
				this.bgcolor = 'transparent'
				this.borderBottom = 'none'
			}
		},
		onLoad(options) {
			this.TestParams.refGameId = options.id
			this.gameName = options.gameName
			this.gameIcon = options.gameIcon
			this.DaziTest()
		}
	}
</script>

<style scoped lang="scss">
.main {
	overflow: hidden;
	.content {
		width: 100%;
	}
}
.title {
	display: flex;
	align-items: center;
	height: 80rpx;
	margin-right: 47rpx;
	text {
		flex: 1;
		margin-right: 50rpx;
		font-size: 32rpx;
		text-align: center;
	}
}
.current {
	border-color: #2fbadf !important;
	color: #26c0fa !important;
}
.preBtn {
	width: 80%;
	background: #e8f9ff;
	color: #26c0fa;
	border: 1px solid rgba(38, 192, 250, .5);
	left: 50%;
	bottom: 100rpx;
	transform: translateX(-50%);
}
.lastBtn {
	width: 45%;
	background: #e8f9ff;
	color: #26c0fa;
	border: 1px solid rgba(38, 192, 250, .5);
}
.OptionStyle {
	border: 1px solid #d0e5ea;
	padding: 20rpx 0 20rpx 40rpx;
	color: #728289;
}
.ProgressStyle {
	left: 0;
	width: 25%;
	height: 100%;
	background-image: linear-gradient(to right, #9a3ad3, #fd5887, #fbb45a);
	transition: width 0.3s ease-in-out;
}
</style>
